.component-loading {

    .loading {
        width: 100vw;
        height: 100vh;
        z-index: 10000;
        background-color: transparent;
        position: fixed;
        top: 0;
        right: 0;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loading_mock {
        z-index: 10000;
        background-color: transparent;
        position: fixed;
        top: 40%;
        right: 35%;
        font-size: 24px;
    }

    .n-message-container.n-message-container--top {
        top: 12px;
        left: 0;
        right: 0;
    }

    .n-message-container {
        z-index: 6000;
        position: fixed;
        height: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .n-message__content {
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        font-weight: bold;
    }

    :root {
        --n-bezier: cubic-bezier(0.4, 0, 0.2, 1);
        --n-margin: 0 0 8px 0;
        --n-padding: 10px 20px;
        --n-max-width: 720px;
        --n-font-size: 14px;
        --n-icon-margin: 0 10px 0 0;
        --n-icon-size: 20px;
        --n-close-size: 16px;
        --n-close-margin: 0 0 0 12px;
        --n-text-color: rgb(51, 54, 57);
        --n-color: #fff;
        --n-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
        --n-icon-color-info: #2080f0;
        --n-icon-color-success: #18a058;
        --n-icon-color-warning: #f0a020;
        --n-icon-color-error: #d03050;
        --n-icon-color-loading: #18a058;
        --n-close-color: rgba(122, 122, 122, 1);
        --n-close-color-pressed: rgba(149, 149, 149, 1);
        --n-close-color-hover: rgba(89, 89, 89, 1);
        --n-line-height: 1.6;
        --n-border-radius: 3px;
    }

    .n-message-wrapper {
        margin: var(--n-margin);
        z-index: 0;
        transform-origin: top center;
        display: flex;
    }

    .n-message {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        transition: color .3s var(--n-bezier), box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier), opacity .3s var(--n-bezier), transform .3s var(--n-bezier), margin-bottom .3s var(--n-bezier);
        padding: var(--n-padding);
        border-radius: var(--n-border-radius);
        flex-wrap: nowrap;
        overflow: hidden;
        max-width: var(--n-max-width);
        color: var(--n-text-color);
        background-color: var(--n-color);
        box-shadow: var(--n-box-shadow);
    }

    .circle {
        margin: 14px;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        display: inline-block;
        transform: scale(0);
        animation: bulge 2s infinite ease-in-out;
    }

    .circle::after {
        position: absolute;
        display: inline-block;
        content: '';
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background-color: inherit;
        top: 0;
        left: 0;
        z-index: -1;
        transform: scale(1);
        animation: blow 2s infinite ease-in-out;
    }

    .circle:nth-child(1) {
        background-color: #4695B8;
        animation-delay: 0s;
    }

    .circle:nth-child(2) {
        background-color: #67A142;
        animation-delay: .25s;
    }

    .circle:nth-child(3) {
        background-color: #8FC0A7;
        animation-delay: .50s;
    }

    @keyframes bulge {
        50% {
            transform: scale(1);
        }
    }

    @keyframes blow {
        25% {
            opacity: 0.5;
        }

        50% {
            opacity: 0.5;
        }

        90% {
            opacity: 0;
        }

        100% {
            transform: scale(2);
            opacity: 0;
        }
    }
}